<template>
  <div class="environmental-education-container">
    <div class="environmental-education-header">
      <div class="header-actions">
        <el-button type="primary" plain size="small" @click="goBack">
          <el-icon><Back /></el-icon> 返回首页
        </el-button>
      </div>
      <h1>自然保护区环境教育</h1>
      <p>学习如何保护我们珍贵的自然保护区</p>
    </div>

    <!-- 主要内容区域 -->
    <el-row :gutter="20">
      <!-- 左侧内容 -->
      <el-col :span="16">
        <!-- 保护区重要性 -->
        <el-card class="content-card">
          <template #header>
            <div class="card-header">
              <span>自然保护区的重要性</span>
              <el-tag type="success" effect="dark">科普教育</el-tag>
            </div>
          </template>

          <div class="importance-content">
            <el-row :gutter="20">
              <el-col :span="8">
                <div class="importance-item">
                  <el-icon class="importance-icon" color="#2e7d32"><MoreFilled /></el-icon>
                  <h3>生物多样性保护</h3>
                  <p>保护珍稀濒危物种及其栖息地，维护生态系统的完整性和稳定性</p>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="importance-item">
                  <el-icon class="importance-icon" color="#1976d2"><Sunny /></el-icon>
                  <h3>气候调节</h3>
                  <p>调节局地气候，净化空气，减缓全球气候变化的影响</p>
                </div>
              </el-col>
              <el-col :span="8">
                <div class="importance-item">
                  <el-icon class="importance-icon" color="#f57c00"><Reading /></el-icon>
                  <h3>科研教育</h3>
                  <p>提供科学研究平台，开展环境教育，提高公众生态保护意识</p>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>

        <!-- 保护措施 -->
        <el-card class="content-card">
          <template #header>
            <div class="card-header">
              <span>保护措施与方法</span>
            </div>
          </template>

          <el-collapse v-model="activeProtectionMethods">
            <el-collapse-item title="严格保护核心区域" name="core">
              <div class="protection-content">
                <ul class="protection-list">
                  <li>禁止任何形式的开发建设活动</li>
                  <li>严格控制人员进入，仅允许科研监测</li>
                  <li>建立完善的巡护制度和监控系统</li>
                  <li>实施24小时监控，防止非法入侵</li>
                </ul>
              </div>
            </el-collapse-item>

            <el-collapse-item title="科学管理缓冲区" name="buffer">
              <div class="protection-content">
                <ul class="protection-list">
                  <li>允许有限的科研教育活动</li>
                  <li>严格控制游客数量和活动范围</li>
                  <li>建立环境影响评估制度</li>
                  <li>定期开展生态监测和评估</li>
                </ul>
              </div>
            </el-collapse-item>

            <el-collapse-item title="合理利用实验区" name="experimental">
              <div class="protection-content">
                <ul class="protection-list">
                  <li>开展生态旅游和环境教育</li>
                  <li>支持当地社区可持续发展</li>
                  <li>推广生态友好的生产方式</li>
                  <li>建设环境教育设施和展示中心</li>
                </ul>
              </div>
            </el-collapse-item>

            <el-collapse-item title="控制外来入侵物种" name="invasive">
              <div class="protection-content">
                <ul class="protection-list">
                  <li>建立外来物种监测预警系统</li>
                  <li>及时清除已发现的入侵物种</li>
                  <li>严格检疫，防止新的入侵</li>
                  <li>恢复本土植被和生态系统</li>
                </ul>
              </div>
            </el-collapse-item>
          </el-collapse>
        </el-card>

        <!-- 公众参与方式 -->
        <el-card class="content-card">
          <template #header>
            <div class="card-header">
              <span>公众参与保护</span>
            </div>
          </template>

          <div class="participation-content">
            <el-row :gutter="20">
              <el-col :span="12">
                <div class="participation-item">
                  <el-icon class="participation-icon" color="#4caf50"><User /></el-icon>
                  <h4>志愿者活动</h4>
                  <ul>
                    <li>参与生态监测和数据收集</li>
                    <li>协助开展环境教育活动</li>
                    <li>参与栖息地恢复工作</li>
                    <li>协助巡护和保护工作</li>
                  </ul>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="participation-item">
                  <el-icon class="participation-icon" color="#ff9800"><Camera /></el-icon>
                  <h4>生态旅游</h4>
                  <ul>
                    <li>选择负责任的旅游方式</li>
                    <li>遵守保护区规章制度</li>
                    <li>参与环境教育项目</li>
                    <li>支持当地社区发展</li>
                  </ul>
                </div>
              </el-col>
            </el-row>

            <el-row :gutter="20" style="margin-top: 20px;">
              <el-col :span="12">
                <div class="participation-item">
                  <el-icon class="participation-icon" color="#2196f3"><School /></el-icon>
                  <h4>环境教育</h4>
                  <ul>
                    <li>参加自然学校课程</li>
                    <li>参与科普讲座和培训</li>
                    <li>开展青少年生态科考</li>
                    <li>传播环保知识和理念</li>
                  </ul>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="participation-item">
                  <el-icon class="participation-icon" color="#9c27b0"><Money /></el-icon>
                  <h4>资金支持</h4>
                  <ul>
                    <li>捐赠支持保护项目</li>
                    <li>购买生态友好产品</li>
                    <li>支持保护区建设</li>
                    <li>资助科研和监测活动</li>
                  </ul>
                </div>
              </el-col>
            </el-row>
          </div>
        </el-card>
      </el-col>

      <!-- 右侧内容 -->
      <el-col :span="8">
        <!-- 行动指南 -->
        <el-card class="content-card">
          <template #header>
            <div class="card-header">
              <span>个人行动指南</span>
            </div>
          </template>

          <div class="action-guide">
            <div class="action-item" v-for="(action, index) in actionGuides" :key="index">
              <div class="action-number">{{ index + 1 }}</div>
              <div class="action-content">
                <h4>{{ action.title }}</h4>
                <p>{{ action.description }}</p>
              </div>
            </div>
          </div>
        </el-card>

        <!-- 成功案例 -->
        <el-card class="content-card">
          <template #header>
            <div class="card-header">
              <span>成功案例</span>
            </div>
          </template>

          <div class="success-cases">
            <div class="case-item" v-for="(caseItem, index) in successCases" :key="index">
              <h4>{{ caseItem.title }}</h4>
              <p>{{ caseItem.description }}</p>
              <el-tag size="small" :type="caseItem.tagType">{{ caseItem.tag }}</el-tag>
            </div>
          </div>
        </el-card>

        <!-- 联系我们 -->
        <el-card class="content-card">
          <template #header>
            <div class="card-header">
              <span>参与保护</span>
            </div>
          </template>

          <div class="contact-info">
            <div class="contact-item">
              <el-icon><Phone /></el-icon>
              <span>志愿者热线：400-123-4567</span>
            </div>
            <div class="contact-item">
              <el-icon><Message /></el-icon>
              <span>邮箱：volunteer@nature.org</span>
            </div>
            <div class="contact-item">
              <el-icon><Location /></el-icon>
              <span>地址：自然保护区管理中心</span>
            </div>

            <el-button type="primary" style="width: 100%; margin-top: 15px;" @click="joinVolunteer">
              <el-icon><UserFilled /></el-icon>
              申请成为志愿者
            </el-button>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 志愿者申请对话框 -->
    <el-dialog v-model="showVolunteerDialog" title="志愿者申请" width="500px">
      <el-form :model="volunteerForm" :rules="volunteerRules" ref="volunteerFormRef" label-width="100px">
        <el-form-item label="姓名" prop="name">
          <el-input v-model="volunteerForm.name" placeholder="请输入您的姓名"></el-input>
        </el-form-item>
        <el-form-item label="联系电话" prop="phone">
          <el-input v-model="volunteerForm.phone" placeholder="请输入联系电话"></el-input>
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="volunteerForm.email" placeholder="请输入邮箱地址"></el-input>
        </el-form-item>
        <el-form-item label="专业背景" prop="background">
          <el-select v-model="volunteerForm.background" placeholder="请选择专业背景" style="width: 100%">
            <el-option label="生物学" value="biology"></el-option>
            <el-option label="环境科学" value="environmental"></el-option>
            <el-option label="生态学" value="ecology"></el-option>
            <el-option label="教育学" value="education"></el-option>
            <el-option label="其他" value="other"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="参与意向" prop="intention">
          <el-checkbox-group v-model="volunteerForm.intention">
            <el-checkbox label="生态监测">生态监测</el-checkbox>
            <el-checkbox label="环境教育">环境教育</el-checkbox>
            <el-checkbox label="巡护工作">巡护工作</el-checkbox>
            <el-checkbox label="科普宣传">科普宣传</el-checkbox>
          </el-checkbox-group>
        </el-form-item>
        <el-form-item label="个人简介" prop="introduction">
          <el-input v-model="volunteerForm.introduction" type="textarea" :rows="3" placeholder="请简单介绍您的相关经验和参与动机"></el-input>
        </el-form-item>
      </el-form>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="showVolunteerDialog = false">取消</el-button>
          <el-button type="primary" @click="submitVolunteerApplication" :loading="submitting">提交申请</el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { ref, reactive, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage, ElMessageBox, type FormInstance } from 'element-plus'
import {
  Back,
  MoreFilled,
  Sunny,
  Reading,
  User,
  Camera,
  School,
  Money,
  Phone,
  Message,
  Location,
  UserFilled
} from '@element-plus/icons-vue'

const router = useRouter()

// 响应式数据
const activeProtectionMethods = ref(['core'])
const showVolunteerDialog = ref(false)
const submitting = ref(false)
const volunteerFormRef = ref<FormInstance>()

// 志愿者申请表单
const volunteerForm = reactive({
  name: '',
  phone: '',
  email: '',
  background: '',
  intention: [] as string[],
  introduction: ''
})

// 表单验证规则
const volunteerRules = {
  name: [
    { required: true, message: '请输入姓名', trigger: 'blur' }
  ],
  phone: [
    { required: true, message: '请输入联系电话', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号码', trigger: 'blur' }
  ],
  email: [
    { required: true, message: '请输入邮箱地址', trigger: 'blur' },
    { type: 'email', message: '请输入正确的邮箱地址', trigger: 'blur' }
  ],
  background: [
    { required: true, message: '请选择专业背景', trigger: 'change' }
  ],
  intention: [
    { type: 'array', required: true, message: '请选择参与意向', trigger: 'change' }
  ],
  introduction: [
    { required: true, message: '请输入个人简介', trigger: 'blur' }
  ]
}

// 行动指南数据
const actionGuides = ref([
  {
    title: '了解保护区',
    description: '学习保护区的生态价值、保护目标和管理规定，提高环保意识。'
  },
  {
    title: '遵守规章制度',
    description: '严格遵守保护区的各项规定，不破坏生态环境，不干扰野生动物。'
  },
  {
    title: '参与志愿活动',
    description: '积极参与保护区组织的志愿者活动，为生态保护贡献力量。'
  },
  {
    title: '传播环保理念',
    description: '向身边的人宣传环保知识，扩大保护区的社会影响力。'
  },
  {
    title: '支持科研工作',
    description: '支持和参与保护区的科研监测工作，为科学保护提供数据支持。'
  },
  {
    title: '绿色生活方式',
    description: '在日常生活中践行绿色低碳的生活方式，减少对环境的影响。'
  }
])

// 成功案例数据
const successCases = ref([
  {
    title: '大熊猫保护',
    description: '通过科学保护和公众参与，大熊猫种群数量稳步增长，保护等级从濒危降为易危。',
    tag: '物种保护',
    tagType: 'success'
  },
  {
    title: '湿地恢复',
    description: '通过生态修复和社区参与，多个湿地保护区生态功能得到有效恢复。',
    tag: '生态修复',
    tagType: 'primary'
  },
  {
    title: '志愿者网络',
    description: '建立覆盖全国的环保志愿者网络，超过300万人参与生态保护工作。',
    tag: '公众参与',
    tagType: 'warning'
  }
])

// 方法
const goBack = (): void => {
  router.push('/')
}

const joinVolunteer = (): void => {
  showVolunteerDialog.value = true
}

const submitVolunteerApplication = async (): Promise<void> => {
  if (!volunteerFormRef.value) return

  try {
    await volunteerFormRef.value.validate()
    submitting.value = true

    // 模拟提交申请
    await new Promise(resolve => setTimeout(resolve, 1500))

    // 保存到本地存储
    const applications = JSON.parse(localStorage.getItem('volunteerApplications') || '[]')
    const newApplication = {
      id: Date.now(),
      ...volunteerForm,
      submitTime: new Date().toLocaleString(),
      status: '待审核'
    }
    applications.push(newApplication)
    localStorage.setItem('volunteerApplications', JSON.stringify(applications))

    ElMessage.success('申请提交成功！我们将在3个工作日内与您联系。')
    showVolunteerDialog.value = false
    resetVolunteerForm()

  } catch (error) {
    console.error('提交申请失败:', error)
    ElMessage.error('提交申请失败，请稍后重试')
  } finally {
    submitting.value = false
  }
}

const resetVolunteerForm = (): void => {
  if (volunteerFormRef.value) {
    volunteerFormRef.value.resetFields()
  }
  Object.assign(volunteerForm, {
    name: '',
    phone: '',
    email: '',
    background: '',
    intention: [],
    introduction: ''
  })
}

onMounted(() => {
  // 页面加载完成后的初始化操作
})
</script>

<style scoped>
.environmental-education-container {
  padding: 20px;
  background-color: #f5f5f5;
  min-height: 100vh;
}

.environmental-education-header {
  text-align: center;
  margin-bottom: 30px;
  padding: 30px;
  background: linear-gradient(135deg, #2e7d32 0%, #4caf50 100%);
  color: white;
  border-radius: 12px;
  position: relative;
}

.header-actions {
  position: absolute;
  top: 20px;
  left: 20px;
}

.environmental-education-header h1 {
  margin: 0 0 10px 0;
  font-size: 2.5em;
  font-weight: 600;
}

.environmental-education-header p {
  margin: 0;
  font-size: 1.1em;
  opacity: 0.9;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-weight: 600;
}

.content-card {
  margin-bottom: 20px;
}

.importance-content {
  padding: 10px 0;
}

.importance-item {
  text-align: center;
  padding: 20px;
}

.importance-icon {
  font-size: 3em;
  margin-bottom: 15px;
}

.importance-item h3 {
  margin: 15px 0 10px 0;
  color: #333;
  font-size: 1.2em;
}

.importance-item p {
  color: #666;
  line-height: 1.6;
  margin: 0;
}

.protection-content {
  padding: 10px 0;
}

.protection-list {
  margin: 0;
  padding-left: 20px;
}

.protection-list li {
  margin-bottom: 8px;
  line-height: 1.6;
  color: #606266;
}

.participation-content {
  padding: 10px 0;
}

.participation-item {
  padding: 15px;
  border: 1px solid #e0e0e0;
  border-radius: 8px;
  background-color: #fafafa;
}

.participation-icon {
  font-size: 2em;
  margin-bottom: 10px;
}

.participation-item h4 {
  margin: 10px 0;
  color: #333;
}

.participation-item ul {
  margin: 0;
  padding-left: 20px;
}

.participation-item li {
  margin-bottom: 5px;
  color: #666;
  line-height: 1.5;
}

.action-guide {
  padding: 10px 0;
}

.action-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 20px;
  padding: 15px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border-left: 4px solid #4caf50;
}

.action-number {
  width: 30px;
  height: 30px;
  background-color: #4caf50;
  color: white;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-right: 15px;
  flex-shrink: 0;
}

.action-content h4 {
  margin: 0 0 8px 0;
  color: #333;
  font-size: 1.1em;
}

.action-content p {
  margin: 0;
  color: #666;
  line-height: 1.5;
  font-size: 0.9em;
}

.success-cases {
  padding: 10px 0;
}

.case-item {
  padding: 15px;
  margin-bottom: 15px;
  background-color: #f8f9fa;
  border-radius: 8px;
  border: 1px solid #e0e0e0;
}

.case-item h4 {
  margin: 0 0 10px 0;
  color: #333;
  font-size: 1.1em;
}

.case-item p {
  margin: 0 0 10px 0;
  color: #666;
  line-height: 1.5;
  font-size: 0.9em;
}

.contact-info {
  padding: 10px 0;
}

.contact-item {
  display: flex;
  align-items: center;
  margin-bottom: 12px;
  color: #606266;
}

.contact-item .el-icon {
  margin-right: 8px;
  color: #2e7d32;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .environmental-education-container {
    padding: 10px;
  }

  .environmental-education-header {
    padding: 20px;
  }

  .environmental-education-header h1 {
    font-size: 2em;
  }

  .importance-item {
    padding: 15px 10px;
  }

  .action-item {
    flex-direction: column;
    text-align: center;
  }

  .action-number {
    margin-right: 0;
    margin-bottom: 10px;
  }
}
</style>
